<template>
    <div class="urbanTertiaryLinkage">
        <select v-model="provId">
            <option v-for="(option, index) in arr" :value="option.id" :key="index">
                {{ option.name }}省
            </option>
        </select>
        <select v-model="cityId">
            <option v-for="(option, index) in cityArr" :value="option.id" :key="index" >
                {{ option.name }}
            </option>
        </select>
        <select v-model="distId">
            <option v-for="(option, index) in districtArr" :value="option.id" :key="index">
                {{ option.name }}
            </option>
        </select>
    </div>
</template>
<script>
export default {
    data () {
        return {
            arr: [],
            cityArr: [],
            districtArr: [],
            provId: '1',
            cityId: '1',
            distId: '1'
            
        }
    },
    props:["provName","cityName","distName"],
    methods: {
        // 获取省列表
        findProvinceList(){
            this.$ajax({
                url: `${this.baseUrl}/api/sysAreaApiController/findProvinceList`,
                data: {},
                success: res => {
                    if(res.resultCode==0){
                        this.arr = res.resultData;
                    }
                }
            });
        },
        // 获取城市列表
        findCityList(){
            this.$ajax({
                url: `${this.baseUrl}/api/sysAreaApiController/findCityList`,
                data: {
                    provinceId: this.provId
                },
                success: res => {
                    if(res.resultCode==0){
                        this.cityArr = res.resultData;
                        this.cityId = res.resultData[0].id;
                    }
                }
            });
        },
        // 获取区列表
        findDistrictList(){
            this.$ajax({
                url: `${this.baseUrl}/api/sysAreaApiController/findDistrictList`,
                data: {
                    cityId: this.cityId
                },
                success: res => {
                    if(res.resultCode==0){
                        this.districtArr = res.resultData;
                        this.distId = res.resultData[0].id;
                    }
                }
            });
        },
        // 发送Id
        sendId(){
            let name = '',preName = '',cityName = '',disName = '';
            for(let i=0;i<this.arr.length;i++){
                if(this.arr[i].id == this.provId){
                    preName = this.arr[i].name;
                }
            }
            for(let j=0;j<this.cityArr.length;j++){
                if(this.cityArr[j].id == this.cityId){
                    cityName = this.cityArr[j].name;
                }
            }
            for(let z=0;z<this.districtArr.length;z++){
                if(this.districtArr[z].id == this.distId){
                    disName = this.districtArr[z].name;
                }
            }
            name = `${preName}省${cityName}${disName}`;
            this.$emit('get-id',this.provId,this.cityId,this.distId,name);
        }
    },
    watch: {
        provId () {
            this.findCityList();
            this.sendId();
        },
        cityId () {
            this.findDistrictList();
            this.sendId();
        },
        distId(){
            this.sendId();
        },
        provName (v) {
            this.provId = v;
        },
    },
    mounted () {
        this.findProvinceList();
        this.findCityList();
        this.findDistrictList();
        this.sendId();
    }
}
</script>
<style lang="less" scoped>
    .urbanTertiaryLinkage{
        select{
            width: 1.5rem;
        }
    }
</style>
